<template>
  <div class="myChart-warp">
    <div id="chart12" ref="chart12" class="myChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart12: null,
      list: [1,2,3,-1,-2,4,5,6,1,2,3,-1,-2,4,5,6,1,2,3]
    }
  },
  props: {
    title: {
      type: Object,
      default: () => {
        return {
          left: '市场活跃指数',
          right: '房价指数'
        }
      }

    }
  },
  mounted() {
    this.initMyChart()
  },
  methods: {
    initMyChart() {
      if (this.myChart12) {
        this.myChart12.dispose()
      }
      this.myChart12 = echarts.init(this.$refs.chart12);
      this.myChart12.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            top: 0,
            bottom: 30
          },
          xAxis: {
            type: 'value',
            position: 'bottom',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              formatter: (value) => {
                return `${value}%`
              }
            }
          },
          yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            data: this.list
          },
          series: [
            {
              name: 'Cost',
              type: 'bar',
              stack: 'Total',
              label: {
                show: true,
                formatter: (value) =>{
                  return `${value.data}%`
                }
              },
              data: this.list
            }
          ]
        }
      );

    }
  }
}

</script>

<style lang="scss" scoped>
.myChart-warp {
  width: 400px;
  height: 560px;
  background-color: #ffffff;
  .myChart {
    width: 100%;
    height: 100%;
  }
}

</style>
